<template>
	<div class="">
		<van-nav-bar left-arrow title="设备编辑" @click-left="onClickLeft" />
		<div class="facilityEdit bg-f" style="margin: 24px 15px 0px 15px;padding-bottom: 20px;border-radius: 5px;">
			<van-loading size="24px" v-if="showLoding" class="detail-loding">加载中...</van-loading>
			<div class="box boxitem">
				<van-form @submit="saveTerminal(item)">
					<van-field class="field-txt" label="设备编号" :value="item.terminalId" :placeholder="item.terminalId"
						disabled />
					<van-field class="nameinput" v-model="item.terminalName" name="设备名称" label="设备名称" placeholder="设备名称"
						:rules="[{ required: true, message: '请填写设备名称' }]" />
					<van-field class="field-txt" v-model="item.terminalType===2?'政务星':'校园星'" name="设备类型" label="设备类型"
						placeholder="设备类型" disabled />
					<van-field class="field-txt" v-model="areaList.province_list[item.terminalProvince]+'-'+
		                        areaList.city_list[item.terminalCity]+'-'+
		                        areaList.county_list[item.terminalCounty]" @click="showPopup" name="设备地址" label="设备地址"
						placeholder="设备地址" :rules="[{ required: true, message: '请填写设备地址' }]" disabled />
					<div class="flex">
						<van-field class="edit-field nameinput" v-model="item.terminalAddress" name="详细地址" label="详细地址"
							placeholder="详细地址" :rules="[{ required: true, message: '请填写详细地址' }]" />
						<div class="div-icon" @click="wxRegister">
							<div class="div-a flex-a">
								<img src="../../../assets/newsetting/ip.png" style="width: 17px;height: 21px;">
								<!-- <van-icon slot="right-icon" name="location-o" class="custom-icon" size="17" /> -->
								<span>定位</span>
							</div>
						</div>
					</div>
					<div class="flex-c" style="margin: 20px;width: 305px;height: 33px;background: #0580FF;border-radius: 5px;font-size: 15px;
					font-family:  auto;
						font-weight: bold;
						color: #FFFFFF;" @click="saveTerminal(item)">
						提交
						<!-- <van-button round block type="info" native-type="submit"></van-button> -->
					</div>
				</van-form>
				<van-popup v-model="show" oncancel="cancel" position="bottom" :style="{ height: '40%' }">
					<van-area @cancel="cancel" @confirm="confirm" title="选择地址" :area-list="areaList" />
				</van-popup>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		getDetail,
		setTerminalsDetail,
		GetInventory
	} from '@/api/BasicTerminals.js'
	import {
		getAutograph
	} from '@/api/WechatAuth'
	import {
		areaList
	} from '@vant/area-data'
	import {
		Popup
	} from 'vant'
	import wx from 'weixin-js-sdk'
	// import {
	// 	Notify
	// } from 'vant'
	export default {
		data() {
			return {
				showLoding: true,
				postdata: '',
				stock: [],
				columnsNum: [{
						code: 15410,
						name: '河南省'
					},
					{
						code: 1851,
						name: '郑州市'
					},
					{
						code: 18411,
						name: '金水区'
					}
				],
				value: '0',
				item: {},
				areaList,
				show: false,
				TerminalId: this.$route.query.terminalId
			}
		},
		// beforeRouteLeave(to, from, next) {
		// 	console.log(to, 'to');
		// 	if (to.name == "Setting") {
		// 		 to.meta.once=true;
		// 	}
		// 	next()
		// },
		created() {
			this.getRowTerminal(this.TerminalId)
			// this.getInventory()
		},
		methods: {
			clearform() {
				this.defaultvalue = 0
				this.forms = {
					templateId: this.mainkey,
					platformId: '',
					templateSort: this.defaultvalue,
					templateKey: '',
					templateName: '',
					templateHeader: '',
					templateContext: '',
					templateFooter: '',
					templateDescrit: '',
					templateState: this.defaultvalue
				}
			},
			saveTerminal(item) {
				console.log(this.item)
				setTerminalsDetail(this.item).then((res) => {
					if (res.success) {
						Notify({
							type: 'success',
							message: '保存成功',
							background: '#0580FF',
						})
						// this.item = res.data.data
						this.getRowTerminal(this.TerminalId)
					} else {
						Notify({
							type: 'warning',
							message: '保存失败',
							background: '#0580FF',
						})
					}
				})
			},
			confirm(columnsNum) {
				this.columnsNum = columnsNum
				this.item.terminalProvince = columnsNum[0].code
				this.item.terminalCity = columnsNum[1].code
				this.item.terminalCounty = columnsNum[2].code
				this.show = false
			},
			onClickLeft() {
				// this.$router.go(-1)
				this.$router.push({
					path: '/setting',
					query: {
						setting: true,
					}
				})
			},
			cancel() {
				this.show = false
			},
			showPopup() {
				this.show = true
			},
			getRowTerminal() {
				getDetail(this.TerminalId).then((res) => {
					if (res.success) {
						this.item = res.data
						this.showLoding = false
					} else {
						alert('查询失败')
					}
				})
			},
			wxRegister() {
				let _that = this
				getAutograph(this.$route.fullPath).then((res) => {
					console.log(res, 'apid')
					wx.config({
						debug: false, // 开启调试模式
						// appId: res.data.appId, // 必填，公众号的唯一标识
						// timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						// nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						// signature: res.data.signature, // 必填，签名，见附录1
						appId: res.appId, // 必填，公众号的唯一标识
						timestamp: res.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.nonceStr, // 必填，生成签名的随机串
						signature: res.signature, // 必填，签名，见附录1
						jsApiList: [
							'checkJsApi',
							'startRecord',
							'getLocation',
							'openLocation'
						]
					})
					wx.ready((res) => {
						wx.getLocation({
							success: (res) => {
								console.log(res, 'ready')
								let pointY = res.latitude // 纬度，浮点数，范围为90 ~ -90
								let pointX = res.longitude // 经度，浮点数，范围为180 ~ -180。
								_that.item.terminalLatitude = pointY
								_that.item.terminalLongitude = pointX
								Notify({
									type: 'success',
									background: '#0580FF',
									message: '定位成功' + ' 当前纬度为' + pointY + ' 当前经度为' +
										pointX
								})
								//通过坐标来显示地图地址
							}
						})
					})
				}).catch(function(error) {
					console.log(error)
				})
				wx.checkJsApi({
					jsApiList: [
						'getLocation'
					],
					success: function(res) {
						if (res.checkResult.getLocation == false) {
							alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！')
							return
						}
					}
				})
				wx.error(function(res) {
					alert(res)
				})
			}
		}
	}
</script>
<style scope>
	.edit-field {
		width: 80%;
		/*border: 1px solid red;*/
	}

	.div-a {
		margin-top: 10px;
	}

	.field-txt input {
		font-size: 14px;
		font-family: auto;
		font-weight: 500;
		color: #BBBBBB;
	}

	.field-txt span {
		font-size: 14px;
		font-family: auto;
		font-weight: 500;
		color: #666666;
	}

	.nameinput input {
		font-size: 14px;
		font-family: auto;
		font-weight: bold;
		color: #000000;



	}

	.bg-f {
		border-radius: 5px;
		background-color: #FFFFFF;
	}

	/*.facilityEditInp {*/
	/*  width: 100%;*/
	/*  line-height: 40px;*/
	/*  font-size: 15px;*/
	/*  font-weight: bold;*/
	/*  border: transparent;*/
	/*  !* background: paleturquoise; *!*/
	/*}*/
	/*.facilityEdit .detail .workbianhao {*/
	/*  width: 140px;*/
	/*  font-size: 15px;*/
	/*  font-weight: bold;*/
	/*  color: #5a5a5a;*/
	/*  !*border: 1px solid red;*!*/
	/*}*/
	/*.facilityEdit .div-work {*/
	/*  margin-left: -27px;*/
	/*  font-size: 15px;*/
	/*  font-weight: bold;*/
	/*  color: #5a5a5a;*/
	/*}*/
	/*.facilityEdit .workitembuytton {*/
	/*  width: 200px;*/
	/*  height: 40px;*/
	/*  background: #94bffb;*/
	/*  line-height: 40px;*/
	/*  border-radius: 20px;*/
	/*  text-align: center;*/
	/*  !*margin:auto;*!*/
	/*  margin-top: 20px;*/
	/*  margin-left: 20%;*/
	/*  color: #ffffff;*/
	/*  font-size: 20px;*/
	/*  font-weight: bolder;*/
	/*}*/
	/* .boxitem{
  padding: 15px;
} */
	/*.facilityEdit .lagbutton {*/
	/*  width: 78px;*/
	/*  height: 29px;*/
	/*  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);*/
	/*  border-radius: 5px;*/
	/*  border: 1px solid #979797;*/
	/*}*/
	/*.facilityEdit .toptile {*/
	/*  width: 375px;*/
	/*  height: 39px;*/
	/*  background: #ffffff;*/
	/*  font-size: 13px;*/
	/*  font-weight: bold;*/
	/*  color: #000000;*/
	/*}*/
	/*.facilityEdit .cell {*/
	/*  border-bottom: 1px solid #f3f3f3;*/
	/*}*/
	.facilityEdit .van-cell__title>span {
		font-size: 14px;
		font-family: auto;
		font-weight: 500;
		color: #666666;
	}

	/*.facilityEdit .workitem {*/
	/*  box-sizing: border-box;*/
	/*  overflow: hidden;*/
	/*  border-radius: 1px;*/
	/*  padding: 15px;*/
	/*  width: 345px;*/

	/*  background: #ffffff;*/
	/*  box-shadow: 0px 1px 2px 0px rgba(236, 236, 236, 1);*/
	/*  border-radius: 5px;*/
	/*}*/
	/*.facilityEdit .lag {*/
	/*  box-sizing: border-box;*/
	/*  overflow: hidden;*/
	/*  border-radius: 1px;*/
	/*  padding: 15px;*/
	/*  width: 345px;*/

	/*  font-size: 16px;*/

	/*  font-weight: bold;*/
	/*  color: #5a5a5a;*/
	/*}*/
	/*.facilityEdit .cell-title {*/
	/*  margin-left: 0px;*/
	/*  font-size: 16px;*/
	/*  padding-left: 35px;*/
	/*  padding-top: 15px;*/
	/*  padding-bottom: 15px;*/

	/*  font-weight: bold;*/
	/*}*/
	.facilityEdit .div-icon {
		margin-left: 0px;
		/*margin-right: 0px;*/
		background: #ffffff;
		width: 20%;
		/*margin-top: 10px;*/
		/*border: 1px seagreen solid;*/
		font-size: 13px;
		font-weight: bolder;
	}

	.div-icon span {
		/*border: 1px solid #02a7f0;*/
	}

	/*.facilityEdit .div-cell {*/
	/*  width: 350px;*/
	/*  margin-left: -17px;*/
	/*  !*border: red 1px solid;*!*/
	/*}*/
	/*van-cell{*/
	/*  border: red 1px solid;*/
	/*}*/
	.facilityEdit .detail-loding {
		width: 100px;
		/*border: 1px solid red;*/
		margin: 25px auto;
	}
</style>
